<!--利润模板-->
<template>
  <div class="newCheckContainer newcheck">
    <!--头部bar开始-->
    <CommonBar :options="options"></CommonBar>
    <!--头部bar结束-->
    <div class="divheight"></div>
    <!--选行政区开始-->

    <div class="areacontent">
      <van-row gutter="30">
        <van-col span="12">
          <p class="menu">{{de_project_company_name}}</p>
        </van-col>
      </van-row>
    </div>
    <!--选行政区结束-->
    <div class="divheight"></div>
    <!--打分开始-->
    <div class="scorecontent">
      <div class="countScoreDiv">
        <div class="countScoreTop">
          <p>
            项目公司：
            <span>{{clearnName}}</span>
          </p>
          <p>{{checkdate}}</p>
        </div>
      </div>
      <div class="countScoreHeader">考核项名称</div>
      <div>
        <van-row class="rowItem">
          <van-col :span="12">利润考核指标（万元）</van-col>
        </van-row>
        <van-row class="rowItem">
          <van-col :span="12">计划利润指标</van-col>
          <van-col :span="12" class="rightcol">
            <input type="number" v-model="profit.plan_value" class="scoerbut" />
          </van-col>
        </van-row>
        <van-row class="rowItem">
          <van-col :span="12">实际利润指标</van-col>
          <van-col :span="12" class="rightcol">
            <input type="number" v-model="profit.reality_value" class="scoerbut" />
          </van-col>
        </van-row>
        <van-row class="rowItem">
          <van-col :span="12">完成率%</van-col>
          <van-col :span="12" class="rightcol">
            <input type="number" v-model="percentage" class="scoerbut" disabled />
          </van-col>
        </van-row>
        <van-row class="rowItem">
          <van-col :span="12">系统评分</van-col>
          <van-col :span="12" class="rightcol">
            <input type="number" v-model="system_score" class="scoerbut" disabled />
          </van-col>
        </van-row>
        <van-row class="rowItem">
          <van-col :span="12">考评得分</van-col>
          <van-col :span="12" class="rightcol">
            <input type="number" v-model="check_score" class="scoerbut" disabled />
          </van-col>
        </van-row>
      </div>

      <div class="botbuttonp" v-if="user_department_type==2 ">
        <p class="refuse" @click="savebut">保存</p>
      </div>
    </div>
    <!--打分结束-->
    <!--加载框开始-->
    <van-overlay :show="showloading">
      <div class="wrapper">
        <div class="loadingcont">
          <van-loading size="24px" vertical>{{loaddingText}}</van-loading>
        </div>
      </div>
    </van-overlay>
    <!--加载框结束-->
  </div>
</template>
<script>
import CommonBar from "../../common/commonBar";
import { mapState } from "vuex";
import { Dialog } from "vant";
export default {
  components: {
    CommonBar
  },
  computed: {
    ...mapState({
      token: state => state.Authorization,
      role_id: state => state.userData.role_id,
      user_department_type: state => state.userData.department_type, //人员类型
      user_department_id: state => state.userData.department_id, // 人员id
      user_group_department_id: state => state.userData.group_department_id,
      user_project_company_id: state => state.userData.project_company_id,
      user_project_id: state => state.userData.project_id
    })
  },
  data() {
    return {
      //公共bar
      options: {
        type: "icon",
        centerText: "利润考核",
        iconNname: "wap-home",
        lefttype: "left"
      },
      //项目管理部
      GroupDepartment: "1",
      GroupDepartmentcolumns: [],
      //项目公司
      ProjectCompany: "",
      ProjectCompanycolumns: [],

      clearnName: "",
      checkdate: "",
      profit: { plan_value: "", reality_value: "" },
      percentage: "",
      system_score: "",
      check_score: "",
      showloading: false,
      loaddingText: "提交信息中",
      is_power: "",
      detailId: "",
      project_company_id: "",
      de_project_company_name: ""
    };
  },
  created() {
    this.detailId = this.$route.query.id;
    // this.initFirst();
    this.clearnDetail();
  },
  destroyed() {
    var that = this;
    document.removeEventListener("backbutton", that.backbutton, false);
  },
  mounted() {
    var that = this;
    document.addEventListener("backbutton", that.backbutton, false);
  },
  watch: {
    profit: {
      //深度监听，可监听到对象、数组的变化
      handler(newval) {
        var percentage = newval.reality_value / newval.plan_value;
        this.percentage = Math.round(percentage * 100);
        this.system_score = this.percentage;
        this.check_score = this.system_score;
      },
      deep: true
    }
  },
  methods: {
    backbutton() {
      if (
        this.profit.plan_value.length != 0 ||
        this.profit.reality_value.length != 0 ||
        this.clearnName != 0
      ) {
        Dialog.confirm({
          title: "提示",
          message: "内容未保存，是否返回"
        })
          .then(() => {
            history.back();
          })
          .catch(() => {
            // on cancel
          });
      } else {
        history.back();
      }
    },
    //利润指标考核详情
    clearnDetail() {
      var params = { token: this.token, id: this.detailId };
      this.$http
        .get(
          `${this.$basePath}?service=App.ProjectCompany.GetProfitDetails&api=86`,
          {
            params: params
          }
        )
        .then(res => {
          if (res.ret == 200) {
            console.log("利润详情", res);
            this.project_company_id = res.data.project_company_id;
            this.clearnName = res.data.project_company_name;
            this.checkdate = res.data.checkdate;
            this.profit.plan_value = res.data.plan_value;
            this.profit.reality_value = res.data.reality_value;
            this.percentage = res.data.percentage;
            this.system_score = res.data.system_score;
            this.check_score = res.data.check_score;
            this.de_project_company_name = res.data.project_company_name;
          } else {
            this.$toast({ message: res.msg });
          }
        });
    },
    initFirst() {
      var params = { token: this.token, group_department_id: 1 };
      this.$http
        .get(
          `${this.$basePath}?service=App.Organizational.ListGroupDepartment&api=84`,
          {
            params: params
          }
        )
        .then(res => {
          if (res.ret == 200) {
            console.log("项目部列表", res);
            var result = res.data.map(o => {
              return {
                text: o.name,
                value: o.id
              };
            });

            this.GroupDepartmentcolumns = result;
            var params = {
              group_department_id: 1,
              token: this.token
            };
            this.initSencond(params);
          } else {
            this.$toast({ message: res.msg });
          }
        });
    },

    /**项目公司 */
    /**项目公司 */
    initSencond(params) {
      this.$http
        .get(
          `${this.$basePath}?service=App.Organizational.ListProjectCompany&api=84`,
          {
            params: params
          }
        )
        .then(res => {
          if (res.ret == 200) {
            console.log("项目公司列表", res);
            var result = res.data.map(o => {
              return {
                text: o.name,
                value: o.id
              };
            });
            this.ProjectCompanycolumns = result;
            if (this.ProjectCompanycolumns.length == 0) {
              var ret = {};
              ret.text = "暂无数据";
              ret.value = 0;
              result.push(ret);
              this.ProjectCompany = result[0].value;
            } else {
              this.ProjectCompany = this.project_company_id;
            }
          } else {
            this.$toast({ message: res.msg });
          }
        });
    },

    savebut() {
      this.showloading = true;
      var params = {
        id: this.detailId,
        token: this.token,
        project_company_id: this.ProjectCompany,
        plan_value: this.profit.plan_value,
        reality_value: this.profit.reality_value
      };
      this.$http
        .post(
          `${this.$basePath}?service=App.ProjectCompany.UpdateProfitCheck&api=86`,
          params
        )
        .then(res => {
          if (res.ret == 200) {
            this.$toast({ message: res.msg });
            this.showloading = false;
            console.log("提交分数", res);
            //提交后清空数据
            this.$router.push({
              //核心语句
              path: "/profitList" //跳转的路径
            });
          } else {
            this.$toast({ message: res.msg });
            this.showloading = false;
          }
        });
    }
  }
};
</script>
<style lang="less" scoped>
@import "../../../assets/css/check";
.botbuttonp {
  width: 100%;
  padding: 15px 0;
  position: fixed;
  bottom: 0;
  .refuse {
    width: 92%;
    height: 38px;
    background: #0ad591;
    border-radius: 2px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    border: none;
    outline: none;
    margin: 0 auto;
    color: #fff;
    font-size: 14px;
  }
}
.scoerbut {
  width: 100px;
  height: 30px;
  box-sizing: border-box;
  border: 1px solid rgba(220, 220, 220, 1);
  border-radius: 2px;
  padding-left: 5px;
  outline: none;
  box-shadow: 0px 0px 0px rgba(0, 0, 0, 0);
  -webkit-appearance: none;
}
.rightcol {
  text-align: right;
}
.savebut1 {
  background: #b5b5b5 !important;
}
</style>